今天的主題是帶有水波動畫效果的裝飾性文字
這個效果跟 實作 css animation - 噪點背景動畫的原理其實一樣 只差在增加了以文字做為背景的剪裁
一樣把架構先寫好

<div class="center-wrap">
  <div class="loader">
    <h2 class="water-ani">
      effect
    </h2>
  </div>
  <div></div>
</div>

一樣把基本的css設定好，這邊比較特殊的就是
background-clip這個以文字用來做背景剪裁的屬性

*{
  font-family:'Lato',sans-serif;
}

body{
  background:#282828;
}
.center-wrap{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:auto;
}

.loader h2{
  text-transform:uppercase;
  font-weight:bold;
  font-size:8rem;
  color:rgba(255,255,255,.2);
  background:url('https://image.ibb.co/j9p51L/wave-h120.png') repeat-x left bottom; 
 background-clip: text;
-webkit-background-clip: text;
}

到這邊的階段 會像下圖所示

接下來開始寫動畫的效果

.water-ani{
  animation:water-flow 15s linear infinite;
}

 @keyframes water-flow{
  0%{background-position:left -60px bottom -100px;}
  50%{background-position:left 600px bottom 20px;}
  100%{background-position:left 1200px bottom -100px;}
} 

建議這邊速度設定成 linear 線性，這個效果做加減速的話，看起來有點奇怪
另外 background-position 的數值可以依實際的素材大小做修改。
唯一要注意的是，不要讓圖片的底部露出來

最後附上本次的 codepen 如下
https://codepen.io/UHU/pen/bmMjRz